<template>
  <div class="big">
    <div class="containers right-panel-active" ref="containers">
      <!-- Sign Up -->
      <div class="containers__form containers--signup">
        <div class="form" id="form1">
          <h2 class="form__title">登录</h2>
          <input
            type="text"
            placeholder="用户名"
            class="input"
            v-model="userName"
          />
          <!-- <input
            type="email"
            placeholder="email"
            class="input"
            v-model="email"
          /> -->
          <input
            type="password"
            placeholder="密码"
            class="input"
            v-model="password"
          />

          <input
            type="text"
            placeholder="验证码"
            class="input"
            v-model="code"
          />

          <img :src="imgSrc" @click="flushCode" />

          <button class="btn" @click="handlerIn">登录</button>
          <a @click="handlerOPen" class="link">Forgot your password?</a>
        </div>
      </div>
      <!-- Sign In -->
      <div class="containers__form containers--signin">
        <div action="#" class="form" id="form2">
          <h2 class="form__title">注册</h2>
          <input
            type="text"
            placeholder="用户名"
            class="input"
            v-model="userName"
          />
          <input
            type="text"
            placeholder="昵称"
            class="input"
            v-model="nickName"
          />
          <input
            type="email"
            placeholder="邮箱"
            class="input"
            v-model="email"
          />

          <input
            type="password"
            placeholder="密码"
            class="input"
            v-model="password"
          />
          <input
            type="password"
            placeholder="确认密码"
            class="input"
            v-model="checkPassword"
          />

          <button
            class="btn"
            @click="handlerUp"
            v-loading.fullscreen.lock="fullscreenLoading"
            element-loading-text="提交中"
          >
            注册
          </button>
        </div>
      </div>
      <el-dialog title="修改密码" :visible.sync="open" width="60%">
        <el-form
          :model="form"
          ref="form"
          label-width="80px"
          class="frame"
          :rules="rules"
        >
          <el-form-item
            label="用户名"
            prop="userName"
            :rules="[
              { required: true, message: '请输入用户名', trigger: 'blur' },
            ]"
          >
            <el-input v-model="form.userName" style="width: 40%"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input
              v-model="form.email"
              type="text"
              style="width: 40%"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="密码"
            prop="password"
            :rules="[
              { required: true, message: '请输入密码', trigger: 'blur' },
            ]"
          >
            <el-input
              v-model="form.password"
              type="password"
              show-password
              style="width: 40%"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="确认密码"
            prop="checkPassword"
            :rules="[
              { required: true, message: '请确认密码', trigger: 'blur' },
            ]"
          >
            <el-input
              v-model="form.checkPassword"
              type="password"
              show-password
              style="width: 40%"
            ></el-input>
          </el-form-item>
          <el-row>
            <el-col :span="11">
              <el-form-item
                label="验证码"
                prop="yzm"
                :rules="[
                  { required: true, message: '请输入验证码', trigger: 'blur' },
                ]"
              >
                <el-input v-model="form.yzm"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button @click="handlerSendEmail" :loading="load"
                  >发送验证码</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary" @click="submitForm('form')"
              >确认修改</el-button
            >
            <el-button @click="handlerOPen">关闭</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- Overlay -->
      <div class="containers__overlay">
        <div class="overlay">
          <div class="overlay__panel overlay--left">
            <button class="btn" @click="handlerSignUp" id="signIn">注册</button>
          </div>
          <div class="overlay__panel overlay--right">
            <button class="btn" @click="handlerSignIn" id="signUp">登录</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
//  const signInBtn = document.getElementById("signIn");
//     const signUpBtn = document.getElementById("signUp");
//     const fistForm = document.getElementById("form1");
//     const secondForm = document.getElementById("form2");
//     const containers = document.querySelector(".containers");

//     signInBtn.addEventListener("click", () => {
//       containers.classList.remove("right-panel-active");
//     });

//     signUpBtn.addEventListener("click", () => {
//       containers.classList.add("right-panel-active");
//     });

//     fistForm.addEventListener("submit", (e) => e.preventDefault());
//     secondForm.addEventListener("submit", (e) => e.preventDefault());
import { userLogin, userRegister, updatepassword } from "../api/user.js";
import { sendEmail } from "../api/email.js";
import { setToken } from "../utils/auth.js";
import { v4 as uuidv4 } from "uuid";
export default {
  name: "LoginIndex",
  inject: ["reload"],
  data() {
    var checkEmail = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
      if (!value) {
        return callback(new Error("邮箱不能为空"));
      }
      setTimeout(() => {
        if (mailReg.test(value)) {
          callback();
        } else {
          callback(new Error("请输入正确的邮箱格式"));
        }
      }, 100);
    };
    return {
      rules: {
        email: [{ validator: checkEmail, trigger: "blur" }],
      },

      open: false,
      timer: null,
      fullscreenLoading: false,
      imgSrc: null,
      code: null,
      uuid: null,
      checkPassword: null,
      nickName: null,
      userName: null,
      password: null,
      email: null,
      load: false,
      form: {
        password: "",
        checkPassword: "",
        userName: "",
        email: "",
        yzm: "",
      },
    };
  },
  methods: {
    handlerOPen() {
      this.open = !this.open;
      this.reset();
    },
    //登录
    handlerIn() {
      if (this.userName == null || this.userName == "") {
        this.tip("警告", "用户名不能为空", "warning");
        return;
      }
      if (this.password == null || this.password == "") {
        this.tip("警告", "密码不能为空", "warning");
        return;
      }
      if (this.code == null || this.code == "") {
        this.tip("警告", "请输入验证码", "warning");
        return;
      }
      userLogin(this.userName, this.password, this.uuid, this.code).then(
        (response) => {
          setToken(response.token);
          // localStorage.setItem("userInfo", JSON.stringify(response.userInfo));
          // 存储用户信息
          // this.handlerSignUp();
          localStorage.setItem("userInfo", JSON.stringify(response.userInfo));
          if (localStorage.getItem("logUrl")) {
            this.$router.push({ path: localStorage.getItem("logUrl") });
          } else {
            this.$router.push({ path: "/" });
          }
        }
      );
    },
    handlerSendEmail() {
      this.load = true;
      console.log(this.load);
      const query = {
        email: this.form.email,
      };
      sendEmail(query).then((response) => {
        this.$message({
          message: "发送成功",
          type: "success",
        });
      });
      let timer = setTimeout(() => {
        //需要定时执行的代码
        this.load = false;
      }, 60000);
      clearTimeout(timer);
    },
    //注册
    handlerUp() {
      var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
      if (this.userName == null || this.userName == "") {
        this.tip("警告", "用户名不能为空", "warning");
        return;
      }
      if (this.nickName == null || this.nickName == "") {
        this.tip("警告", "昵称不能为空", "warning");
        return;
      }
      if (this.email == null || this.email == "") {
        this.tip("警告", "请输入邮箱", "warning");
        return;
      }
      if (!reg.test(this.email)) {
        this.tip("警告", "请输入正确的邮箱", "warning");
        return;
      }
      if (this.password == null || this.password == "") {
        this.tip("警告", "密码不能为空", "warning");
        return;
      }
      if (!(this.password == this.checkPassword)) {
        this.tip("警告", "两次输入的密码不一致", "warning");
        return;
      }
      this.fullscreenLoading = true;
      userRegister(this.userName, this.nickName, this.email, this.password)
        .then((response) => {
          //注册成功后调整到登录
          this.fullscreenLoading = false;
          this.handlerSignIn();
          this.reset();
          this.$message({
            message: "注册成功",
            type: "success",
          });
        })
        .catch((error) => {
          this.fullscreenLoading = false;
        });
    },
    tip(title, message, type) {
      const h = this.$createElement;
      this.$notify({
        title: title,
        message: h("i", { style: "color: teal" }, message),
        type: type,
      });
    },
    reset() {
      this.userName = null;
      this.nickName = null;
      this.password = null;
      this.email = null;
      this.checkPassword = null;
      this.form = {
        password: "",
        checkPassword: "",
        userName: "",
        email: "",
        yzm: "",
      };
    },
    goLogin: function () {
      //去登陆
      this.$router.push({ path: "/Login?login=1" });
    },
    goRegister: function () {
      //去注册
      this.$router.push({ path: "/Login?login=0" });
    },
    //处理点击登录之后的样式
    handlerSignIn() {
      this.reset();
      this.$refs.containers.classList.add("right-panel-active");
      // containers.classList.remove("right-panel-active");
    },
    //处理点击注册之后的样式
    handlerSignUp() {
      this.reset();
      this.$refs.containers.classList.remove("right-panel-active");
      // containers.classList.add("right-panel-active");
    },
    //刷新验证码
    flushCode() {
      this.uuid = uuidv4();
      this.imgSrc =
        "http://10.250.204.66:8988/flushcode?" + "uuid" + "=" + this.uuid;
      clearInterval(this.timer);
      this.job();
    },
    getCode() {
      this.flushCode();
    },
    //定时任务，每个60秒刷新验证码
    job() {
      this.timer = setInterval(this.flushCode, 60000); // 注意: 第一个参数为方法名的时候不要加括号;
    },
    //修改密码提交
    submitForm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          updatepassword(this.form).then((response) => {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.open = false;
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  mounted() {
    this.getCode();
  },
};
</script>



<style >
:root {
  /* COLORS */
  --white: #e9e9e9;
  --gray: #333;
  --blue: #0367a6;
  --lightblue: #008997;

  /* RADII */
  --button-radius: 0.7rem;

  /* SIZES */
  --max-width: 758px;
  --max-height: 420px;

  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.big {
  align-items: center;
  background-color: var(--white);
  /* background: url("https://res.cloudinary.com/dbhnlktrv/image/upload/v1599997626/background_oeuhe7.jpg"); */
  background: url(../../static/img/background.jpg);
  /* 决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。 */
  /* https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-attachment */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: grid;
  height: 100vh;
  place-items: center;
}

.form__title {
  font-weight: 300;
  margin: 0;
  /* margin-bottom: 1.25rem; */
  margin-bottom: 0.5rem;
}

.link {
  color: var(--gray);
  font-size: 0.9rem;
  margin: 1.5rem 0;
  text-decoration: none;
}

.containers {
  background-color: var(--white);
  border-radius: var(--button-radius);
  box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
    0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
  height: var(--max-height);
  max-width: var(--max-width);
  overflow: hidden;
  position: relative;
  width: 100%;
}

.containers__form {
  height: 100%;
  position: absolute;
  top: 0;
  transition: all 0.6s ease-in-out;
}

.containers--signin {
  left: 0;
  width: 50%;
  z-index: 2;
}

.containers.right-panel-active .containers--signin {
  transform: translateX(100%);
}

.containers--signup {
  left: 0;
  opacity: 0;
  width: 50%;
  z-index: 1;
}

.containers.right-panel-active .containers--signup {
  animation: show 0.6s;
  opacity: 1;
  transform: translateX(100%);
  z-index: 5;
}

.containers__overlay {
  height: 100%;
  left: 50%;
  overflow: hidden;
  position: absolute;
  top: 0;
  transition: transform 0.6s ease-in-out;
  width: 50%;
  z-index: 100;
}

.containers.right-panel-active .containers__overlay {
  transform: translateX(-100%);
}

.overlay {
  background-color: var(--lightblue);
  /* background: url("https://res.cloudinary.com/dbhnlktrv/image/upload/v1599997626/background_oeuhe7.jpg"); */
  background: url(../../static/img/background.jpg);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  left: -100%;
  position: relative;
  transform: translateX(0);
  transition: transform 0.6s ease-in-out;
  width: 200%;
}

.containers.right-panel-active .overlay {
  transform: translateX(50%);
}

.overlay__panel {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  position: absolute;
  text-align: center;
  top: 0;
  transform: translateX(0);
  transition: transform 0.6s ease-in-out;
  width: 50%;
}

.overlay--left {
  transform: translateX(-20%);
}

.containers.right-panel-active .overlay--left {
  transform: translateX(0);
}

.overlay--right {
  right: 0;
  transform: translateX(0);
}

.containers.right-panel-active .overlay--right {
  transform: translateX(20%);
}

.btn {
  background-color: var(--blue);
  background-image: linear-gradient(
    90deg,
    var(--blue) 0%,
    var(--lightblue) 74%
  );
  border-radius: 20px;
  border: 1px solid var(--blue);
  color: var(--white);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  padding: 0.9rem 4rem;
  text-transform: uppercase;
  transition: transform 80ms ease-in;
}

.form > .btn {
  margin-top: 1.5rem;
}

.btn:active {
  transform: scale(0.95);
}

.btn:focus {
  outline: none;
}

.form {
  background-color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 3rem;
  height: 100%;
  text-align: center;
}

.input {
  background-color: #fff;
  border: none;
  padding: 0.9rem 0.9rem;
  margin: 0.5rem 0;
  width: 100%;
}
.code {
  background-color: #fff;
  border: none;
  padding: 0.9rem 0.9rem;
  /* margin: 0.5rem 0; */
  margin: 0.5rem 0;
  width: 80%;
}

@keyframes show {
  0%,
  49.99% {
    opacity: 0;
    z-index: 1;
  }

  50%,
  100% {
    opacity: 1;
    z-index: 5;
  }
}
</style>